<template>
  <a-layout
    :class="['admin-layout', 'beauty-scroll']"
    style="
      min-height: calc(100vh - 65px - 77px);
      min-width: 900px;
      overflow-x: scroll;
    "
  >
    <!-- 顶部菜单栏 -->
    <admin-header
      :class="[
        {
          'fixed-tabs': fixedTabs,
          'fixed-header': fixedHeader,
          'multi-page': multiPage,
        },
      ]"
      :style="headerStyle"
      :menuData="headMenuData"
      :collapsed="collapsed"
      @toggleCollapse="toggleCollapse"
    />
    <a-layout-header
      :class="[
        'virtual-header',
        {
          'fixed-tabs': fixedTabs,
          'fixed-header': fixedHeader,
          'multi-page': multiPage,
        },
      ]"
      v-show="fixedHeader"
    ></a-layout-header>
    <a-layout>
      <!-- 左侧菜单栏 -->
      <a-layout-sider>
        <!-- <drawer v-if="isMobile" v-model="drawerOpen">
          <side-menu
            :theme="theme.mode"
            :menuData="menuData"
            :collapsed="false"
            :collapsible="false"
            @menuSelect="onMenuSelect"
          />
        </drawer> -->

        <side-menu
          :class="[fixedSideBar ? 'fixed-side' : '']"
          :theme="theme.mode"
          :menuData="sideMenuData"
          :collapsed="collapsed"
          :collapsible="true"
        />
        <div
          v-if="fixedSideBar && !isMobile"
          :style="`width: ${sideMenuWidth}; min-width: ${sideMenuWidth};max-width: ${sideMenuWidth};`"
          class="virtual-side"
        ></div>

        <!-- <drawer v-if="!hideSetting" v-model="showSetting" placement="right">
          <div class="setting" slot="handler">
            <a-icon :type="showSetting ? 'close' : 'setting'" />
          </div>
        </drawer> -->
      </a-layout-sider>
      <!-- 右中部区 -->
      <a-layout style="padding: 0 24px 24px">
        <a-breadcrumb style="margin-top: 60px"></a-breadcrumb>
        <!-- 主要内容区 -->
        <a-layout-content
          class="admin-layout-content"
          :style="`min-height: ${minHeight}px;`"
        >
          <!-- :style="`min-height: ${minHeight}px;`" -->
          <div style="position: relative">
            <slot></slot>
          </div>
        </a-layout-content>
        <!-- 底部菜单栏 -->
        <a-layout-footer>
          <page-footer :link-list="footerLinks" :copyright="copyright" />
        </a-layout-footer>
      </a-layout>
    </a-layout>
  </a-layout>
</template>

<script>
import AdminHeader from "./header/AdminHeader";
import PageFooter from "./footer/PageFooter";
import Drawer from "../components/tool/Drawer";
import SideMenu from "../components/menu/SideMenu";
import { mapState, mapMutations, mapGetters } from "vuex";

// const minHeight = window.innerHeight - 64 - 122

export default {
  name: "AdminLayout",
  components: { SideMenu, Drawer, PageFooter, AdminHeader },
  data() {
    return {
      minHeight: window.innerHeight - 122 - 20,
      collapsed: false,
      showSetting: false,
      drawerOpen: false,
    };
  },
  provide() {
    return {
      adminLayout: this,
    };
  },
  watch: {
    $route(val) {
      this.setActivated(val);
    },
    layout() {
     
      this.setActivated(this.$route);
    },
    isMobile(val) {
      if (!val) {
        this.drawerOpen = false;
      }
    },
  },
  computed: {
    ...mapState("setting", [
      "isMobile",
      "theme",
      "layout",
      "footerLinks",
      "copyright",
      "fixedHeader",
      "fixedSideBar",
      "fixedTabs",
      "hideSetting",
      "multiPage",
    ]),
    ...mapGetters("setting", ["firstMenu", "subMenu", "menuData"]),
    sideMenuWidth() {
      return this.collapsed ? "80px" : "205px";
    },
    headerStyle() {
      let width =
        this.fixedHeader && this.layout !== "head" && !this.isMobile
          ? `calc(100% - ${this.sideMenuWidth})`
          : "100%";
      let position = this.fixedHeader ? "fixed" : "static";
      return `width: ${width}; position: fixed;`;
    },
    headMenuData() {
      const { layout, menuData, firstMenu } = this;

       return layout === "mix" ? firstMenu : firstMenu;
      // return layout === "mix" ? firstMenu : menuData;
    },
    sideMenuData() {
      const { layout, menuData, subMenu } = this;
      // if (subMenu[0]&&subMenu[0].fullPath) {
      //   this.$router.push(subMenu[0].fullPath);
      // }
      // this.$router.push(subMenu[0].fullPath)
      // return layout === "mix" ? subMenu : subMenu;
      return layout === "mix" ? subMenu : menuData;
    },
  },
  methods: {
    ...mapMutations("setting", ["correctPageMinHeight", "setActivatedFirst"]),
    toggleCollapse() {
      this.collapsed = !this.collapsed;
    },
    onMenuSelect() {
      this.toggleCollapse();
    },
    setActivated(route) {
      // if (this.layout === "mix") {
      let matched = route.matched;
      var obj = matched[1];
      const { firstMenu } = this;

      for (let menu of firstMenu) {
        //拿到子路由
        if (obj.path === menu.fullPath) {
          this.setActivatedFirst(menu.fullPath);
          break;
        }
      }
      // }
    },
  },
  created() {
    this.correctPageMinHeight(this.minHeight - 24);
    this.setActivated(this.$route);
  },
  beforeDestroy() {
    this.correctPageMinHeight(-this.minHeight + 24);
  },
};
</script>

<style lang="less" scoped>
.admin-layout {
  .side-menu {
    &.fixed-side {
      position: fixed;
      height: 100vh;
      left: 0;
      top: 0;
    }
  }

  .virtual-side {
    transition: all 0.2s;
  }

  .virtual-header {
    transition: all 0.2s;
    opacity: 0;

    &.fixed-tabs.multi-page:not(.fixed-header) {
      height: 0;
    }
  }

  .admin-layout-main {
    .admin-header {
      top: 0;
      right: 0;
      overflow: hidden;
      transition: all 0.2s;

      &.fixed-tabs.multi-page:not(.fixed-header) {
        height: 0;
      }
    }
  }

  .admin-layout-content {
    padding: 10px 30px;

    /*overflow-x: hidden;*/
    /*min-height: calc(100vh - 64px - 122px);*/
    // min-width: 900px;
  }
  .admin-layout-content::-webkit-resizer {
    background-color: rgb(242, 5, 151);
  }

  .setting {
    background-color: @primary-color;
    color: @base-bg-color;
    border-radius: 5px 0 0 5px;
    line-height: 40px;
    font-size: 22px;
    width: 40px;
    height: 40px;
    box-shadow: -2px 0 8px @shadow-color;
  }
}
</style>
